<template>
    <div style="height: 100%;">
        <van-row class="search-row">
            <van-search v-model="formData.keyWord" maxlength="20" show-action placeholder="品名/型号" @search="getSearch">
                <template #action>
                    <div @click="getSearch">搜索</div>
                </template>
            </van-search>
            <div class="filter-icon">
                <van-icon name="filter-o" @click="$refs.queryPopupRef.show = true" />
            </div>
        </van-row>
        <!-- 防疫物资列表 -->
        <van-row class="listCon">
            <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="getSearch">
                <van-swipe-cell v-for="(val) in listData" :key="val.tdId">
                    <div class="cellContent">
                        <div class="top">
                            <div class="flexTit">
                                <p class="title">{{ val.prodName }}</p>
                                <p class="other">
                                    <van-checkbox v-model="val.checked" @change="isChange">
                                        <template #icon="props">
                                            <van-icon v-if="!props.checked" name="plus" color="#1989fa" />
                                        </template>
                                    </van-checkbox>
                                </p>
                            </div>
                            <div class="flex">
                                <van-image width="60" height="60" :src="val.photoUrl" />
                                <div>
                                    <div>
                                        <span class="label">型号：</span>
                                        {{ val.model }}
                                    </div>
                                    <span>
                                        <span class="label">库存：</span>
                                        {{ val.stockAmount }}/ {{ val.unitName }}
                                    </span>
                                    <div>
                                        <span class="label">单价：</span>
                                        <span>￥***/{{ val.unitName }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="bottom">
                            <div class="flex people">
                                <p>
                                    <span class="label">库存：</span>
                                    <span :class="{ 'redSpan': val.stockAmount == 0 }">{{ val.stockAmount }}</span>
                                    <span>/</span>
                                    {{ val.unitName }}
                                </p>
                                <van-stepper v-model="val.appAmount" input-width="40px" min="0" :max="val.stockAmount"
                                    integer />
                            </div>
                        </div> -->
                    </div>
                </van-swipe-cell>
                <van-empty v-if="!loading && !listData.length" class="custom-image"
                    :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
            </van-pull-refresh>
        </van-row>
        <!-- 筛选条件弹出框 -->
        <queryPopup ref="queryPopupRef" @handleSearch="defineSearch" @handleReset="resetForm">
            <van-form class="filterBox">
                <label>关键字：</label>
                <van-field v-model="formData.keyWord" placeholder="品名/型号" />
                <label>分类：</label>
                <van-field>
                    <template #input>
                        <div class="textCon" @click="showPicker = true">
                            <span v-if="!canteenText" style="color: #aaa">请选择分类</span>
                            <span v-else>{{ canteenText }}</span>
                        </div>
                    </template>
                </van-field>
            </van-form>
        </queryPopup>
        <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="actionsArr" @select="onConfirm" />
        <van-submit-bar :price="leg" :decimal-length="0" label="已选中：" currency="" button-text="确定" @submit="appliance" />
        <full-loading v-if="loading"></full-loading>
    </div>
</template>
<script>
import { getPageForArticles, getSelectList } from "@/api/srvAssurance/epidprevention/apply/apply";
import { queryFileInfo } from '@/api/common';
export default {
    props: {
        listArr: {
            type: Array,
            default: () => []
        },
    },
    data() {
        return {
            removeLsit: [],
            showPicker: false,
            formData: {
                keyWord: '',
                categoryId: ''
            },
            actionsArr: [],
            canteenText: '',
            refreshLoading: false,
            listData: [], // 列表数据
            loading: false,
            selectList: [],
            leg: 0, // 选择数量
        };
    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        this.getSearch();
    },
    methods: {
        onConfirm(item) {
            this.formData.categoryId = item.id;
            this.canteenText = item.name;
            this.showPicker = false;
        },
        // 下拉框数据
        initSelect() {
            getSelectList().then(res => {
                if (res.code == 1000) {
                    this.actionsArr = res.data.map(item => {
                        return {
                            'name': item.title,
                            'id': item.value
                        }
                    })
                }
            })
        },
        // 确定筛选
        defineSearch() {
            this.$refs.queryPopupRef.show = false;
            this.getSearch()
        },
        // 获取表格数据
        getSearch() {
            this.listData = [];
            this.loading = true;
            getPageForArticles(this.formData)
                .then((res) => {
                    this.loading = false;
                    this.refreshLoading = false;
                    if (res.code === 1000 && res.data) {
                        let arr = res.data.records;
                        arr.map(item => {
                            this.$set(item, 'checked', false)
                            if (item.fileCode) {
                                queryFileInfo({ fileCode: item.fileCode }).then(res => {
                                    if (res.code == 1000) {
                                        let src = res.data.url;
                                        this.$set(item, 'photoUrl', src);
                                    }
                                })
                            }
                        })
                        this.listData = arr;
                        this.totalPage = Math.ceil(res.data.total / 20);
                        this.decideLsit();
                    }
                })
                .catch(() => {
                    this.loading = false;
                    this.refreshLoading = false;
                });
        },
        // 选中防疫物资
        isChange(val) {
            let arr = [];
            this.listData.map(item => {
                if (item.checked) {
                    arr.push(item)
                }
            })
            this.selectList = arr;
            this.leg = this.selectList.length * 100;
        },
        //对数组去重
        unique(arr) {
            return arr.filter((item, index, arr) => {
                return arr.indexOf(item, 0) === index;
            });
        },
        //已选中防疫物资
        appliance() {
            this.$emit('restLsit', []);
            let arr = [];
            var list = this.unique(this.selectList);
            list.forEach(e => {
                let obj = {
                    epidMaterialId: e.epidMaterialId,
                    prodName: e.prodName,
                    model: e.model,
                    unit: e.unit,
                    unitName: e.unitName,
                    price: e.price,
                    stockId: e.stockId,
                    stockAmount: e.stockAmount,
                    checked: e.checked,
                    appAmount: 0,
                    photoUrl: e.photoUrl
                }
                arr.push(obj)
            })
            this.$emit('addList', arr);
            this.isModal();
        },
        //返回上一页
        isModal() {
            this.$emit('goBack');
        },
        // 重置表单
        // resetForm() {
        //     this.formData = {
        //         keyWord: '',
        //     };
        //     this.leg = 0;
        //     this.getSearch();
        // },
        // 重置表单
        resetForm() {
            this.formData = {
                keyWord: '',
                categoryId: ''
            };
            this.leg = this.removeLsit.length * 100;
            this.canteenText = "";
            this.getSearch();
        },
        //判断列表中的数据是否选中
        decideLsit() {
            this.removeLsit.forEach(e => {
                this.listData.forEach(item => {
                    if (item.epidMaterialId == e.epidMaterialId) {
                        item.checked = true
                    }
                })
            })
        }
    },
};
</script>

<style scoped lang="less">
.listCon {
    height: calc(100% - 105px);

    .cellContent {
        padding: 10px;
        margin-bottom: 5px;

        .flex {
            display: flex;

            // justify-content: space-between;
            >div:nth-child(2) {
                margin-left: 10px;
            }

            p:nth-of-type(1) {
                flex: inherit !important;
                width: 45%;
            }
        }
    }

    .redSpan {
        color: red;
    }
}
</style>
